/*
 * @Author: puyue 10857397+puyue123@user.noreply.gitee.com
 * @Date: 2022-08-12 11:21:17
 * @LastEditors: puyue 10857397+puyue123@user.noreply.gitee.com
 * @LastEditTime: 2022-08-17 15:07:56
 * @FilePath: \bpm-management-system\src\component\procurementmanage\addgongyingshang.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { Button, Form, Input, Select, Space, Table, Modal } from 'antd';
import React, { useState } from 'react';
import './Addgongyingshang.less'

const { Option } = Select;
const { TextArea } = Input;

const columns = [
  {
    title: '序号',
    width:60,
    dataIndex: 'serial',
    key: 'serial',
    align: 'center',
    fixed:'left'
  },
  {
    title: '户名',
    width:200,
    dataIndex: 'name',
    key: 'name',
    align:"center"
  },
  {
    title: '开户行',
    width:120,
    dataIndex: 'bank',
    key: 'bank',
    align:"center"
  },
  {
    title: '账户',
    width:200,
    dataIndex: 'account',
    key: 'account',
    align:"center"
  },
  {
    title: '操作',
    width:150,
    key: 'operation',
    render: () => (
      <Space size="middle">
        <a href='###'>编辑</a>
        <a href='###'>删除</a>
      </Space>
    ),
    align: "center",
    fixed:'right'
  },
];
const data = [
  {
    key: '1',
    serial: 1,
    name: '上海银桥装饰材料有限公司',
    bank: '招商银行上海分行',
    account: '8239233',
    
  },
  {
    key: '2',
    serial: 2,
    name: '上海银桥装饰材料有限公司',
    bank: '招商银行上海分行',
    account: '823923388324',
  },
  {
    key: '3',
    serial: 3,
    name: '上海银桥装饰材料有限公司',
    bank: '招商银行上海分行',
    account: '8239233',
  },
];

const CollectionCreateForm = ({ visible, onCreate, onCancel }) => {
  const [form] = Form.useForm();
  return (
    <Modal
      visible={visible}
      title="编辑账户"
      okText="确定"
      cancelText="取消"
      onCancel={onCancel}
      onOk={() => {
        form
          .validateFields()
          .then((values) => {
            form.resetFields();
            onCreate(values);
          })
          .catch((info) => {
            console.log('Validate Failed:', info);
          });
      }}
    >
      <Form
        form={form}
        layout="vertical"
        name="form_in_modal"
        initialValues={{
          modifier: 'public',
        }}
      >
        <Form.Item
          name="title"
          label="户名"
        >
          <Input />
        </Form.Item>
        <Form.Item name="description" label="开户行">
          <Input />
        </Form.Item>

        <Form.Item name="description" label="账户">
          <Input />
        </Form.Item>
        
      </Form>
    </Modal>
  );
};


export default function Addgongyingshang() {
  const [visible, setVisible] = useState(false);

  const onCreate = (values) => {
    console.log('Received values of form: ', values);
    setVisible(false);
  };

  return (
    <div>
      <div>
        <p><span className='block'>▋</span><span>基本信息</span></p>
      </div>
      <Form
        className='box'
        labelCol={{
          span: 6,
        }}
        wrapperCol={{
          span: 16,
        }}
        initialValues={{
          remember: true,
        }}
        autoComplete="off"
      >
        <Form.Item label="供应商编号" name="username" rules={[{ required: true }]} className='line'>
          <Input />
        </Form.Item>

        <Form.Item label="创建时间" name="username" className='line'>
          <Input type='date'/>
        </Form.Item>

        <Form.Item label="供应商名称" name="username" rules={[{ required: true }]} className='line'>
          <Input />
        </Form.Item>
        
        <Form.Item label="供应商简称" name="username" rules={[{ required: true }]} className='line'>
          <Input />
        </Form.Item>

        <Form.Item label="统一社会信用代码" name="username" rules={[{ required: true }]} className='line'>
          <Input />
        </Form.Item>

        <Form.Item label="企业性质" name="username" rules={[{ required: true }]} className='line'>
            <Select placeholder="请选择">
              <Option value="china">China</Option>
              <Option value="usa">U.S.A</Option>
            </Select>
        </Form.Item>

        <Form.Item label="法人代表" name="username" rules={[{ required: true }]} className='line'>
          <Input />
        </Form.Item>
        
        <Form.Item label="法人手机" name="username" rules={[{ required: true }]} className='line'>
          <Input />
        </Form.Item>

        <Form.Item label="注册资本" name="username" rules={[{ required: true }]} className='line'>
          <Input />
        </Form.Item>

        <Form.Item label="企业网址" name="username" rules={[{ required: true }]} className='line'>
          <Input />
        </Form.Item>

        <Form.Item label="营业期限" name="username" rules={[{ required: true }]} className='line'>
          <Input />
        </Form.Item>
        
        <Form.Item label="所属地区" name="username" rules={[{ required: true }]} className='line'>
          <Input />
        </Form.Item>

        <Form.Item label="纳税人资格" name="username" rules={[{ required: true }]} className='line'>
          <Select placeholder="请选择">
            <Option value="china">China</Option>
            <Option value="usa">U.S.A</Option>
          </Select>
        </Form.Item>

        <Form.Item label="详细地址" name="username" rules={[{ required: true }]} className='line'>
          <Input />
        </Form.Item>

        <Form.Item label="纳税人识别号" name="username" rules={[{ required: true }]} className='line'>
          <Input />
        </Form.Item>
        
      </Form>

      <Form
        className='box'
        labelCol={{
          span: 6,
        }}
        wrapperCol={{
          span: 16,
        }}
        initialValues={{
          remember: true,
        }}
        autoComplete="off"
      >
      <Form.Item label="经营范围">
          <TextArea rows={4} />
      </Form.Item>
      </Form>
      <div>
        <p><span className='block'>▋</span><span>服务信息</span></p>
      </div>

      <div className='addbtn'>
        <p><span className='block'>▋</span><span>银行账号</span></p>
        <Button
        type="primary"
        onClick={() => {
          setVisible(true);
        }}
      >
        新增账户
      </Button>
      <CollectionCreateForm
        visible={visible}
        onCreate={onCreate}
        onCancel={() => {
          setVisible(false);
        }}
      />
      </div>
      <Table
    columns={columns}
    dataSource={data}
        scroll={{                                                                         
      
      x: 1220,
    }}
      />
      <div>
        <Button>保存</Button>
        <Button>取消</Button>
      </div>
    </div>
  )
}

